<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">编辑界面</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">ID</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input  :value="experts.id" readonly="readonly" style="height: 30px;" type="text"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">姓名</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input :value="experts.name" style="height: 30px"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">性别</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input :value="experts.sex" style="height: 30px"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">联系电话</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input :value="experts.phone" style="height: 30px"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">状态</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <template>
                        <el-switch
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                v-model="experts.status==0?false:true"
                                @change="handleStatus(experts)"
                        >
                        </el-switch>
                        </template>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">加入时间</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input :value="experts.createDate" style="height: 30px"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">离职时间</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input :value="experts.lastTime" style="height: 30px"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">单位</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input :value="experts.company" style="height: 30px"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">科室</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input :value="experts.specialty" style="height: 30px"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">编号</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light">
                    <input readonly="readonly" :value="experts.numberCard" style="height: 30px"/>
                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    import Table from '@/apis';

    export default {
        name: 'editorExpert',
        data() {
            return {
                id: this.$route.query.Id,
                experts: {},

            }
        },
        created() {
            this.getCheckExpertById(this.id);
        },
        methods: {
            async getCheckExpertById() {
                return await Table.getCheckExpertById(this.id).then(res => {
                    this.experts = res.data.data;
                    console.log(this.experts);
                });
            },
            handleStatus(value){
                console.log(value)
                value.status=!value.status;
            },
        }

    };
</script>
<style>
    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
